<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=750,target-densitydpi=device-dpi,maximum-scale=1.0, user-scalable=no">
    <script type="text/javascript">
        function setWidth(e) { if (/Andriod/i.test(navigator.userAgent)) { var f, d = window.innerWidth; (d != e) && (f = d / e), document.addEventListener("DOMContentLoaded", function () { var a = document.getElementsByTagName("body")[0]; a.style.webkitTransformOrigin = "left top"; a.style.webkitTransform = "scale(" + f + ")" }, !1) } } setWidth(750);
    </script>
    <title>首页 - 乐购</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/1.css">
    <link rel="stylesheet" href="css/2.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <header>
            <div class="header">
                <img src="images/logo.png" alt="" class="logo">
                <div class="search">
                    <i class="icon fl">&#xe6cf;</i>
                    <input type="text" placeholder="输入商家">
                </div>
                <i class="icon saoma">&#xe604;</i>
                <i class="icon ring">&#xe6b0;</i>
            </div>
            <section>
                <div class="goods fl">
                    <ul>
                        <li class="box">优选水果</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                        <li>卤味熟食</li>
                    </ul>
                </div>
            </section>
            <section>
                <!-- 优选水果 -->
                <div class="bosx">
                    <div class="boxs fl yx">
                        <p class="fl ds">优选水果</p>
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl xxc">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <!-- 水果单切 -->
                <div class="bosx">
                    <div class="boxs fl yx">
                        <p class="fl ds">不好水果</p>
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="boxs fl xxc">
                        <img class="fl" src="images/shuiguo.png" alt="">
                        <div class="fl">
                            <span class="bos">精选</span><span>爱鲜蜂-佳沛绿奇异果</span>
                            <p class="bs">买一赠一</p>
                            <p class="px">3粒一盒</p>
                            <p class="cs">￥16.9</p>
                            <div class="anniu">＋</div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </section>
            <nav>
                <div class="nav">
                    <ul>
                        <!-- 每个li设置宽度25%，内容水平居中 -->
                        <li>
                            <a href="">
                                <i class="icon">&#xe61e;</i>
                                <p>首页</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="icon">&#xe66e;</i>
                                <p>闪送超市</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="icon">&#xe64a;</i>
                                <p>我的</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <i class="icon">&#xe60c;</i>
                                <p>￥0起送</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            <script src="js/jquery3.3.1.min.js"></script>
            <script>
                var h = $('body').height();
                var goods_h = h - 102 - 127;
                $('.goods').css('height', goods_h + 'px');
                $('.goods ul li').click(function(){
                    // alert(1)
                var i = $(this).index();   //获取被点击的li下标
            // show()  显示   hide（）隐藏
                    $('.bosx').eq(i).show().siblings('.bosx').hide();
                    $('this').addClass('box').siblings().removeClass('box')
                });
                $('.goods ul li').eq(0).click();
            </script>
</body>

</html>